<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      ul {
        margin: 10px auto;
        width: 200px;
        background-color: #eee;
      }
      li {
        list-style-type: none;
        overflow: hidden;
        margin-bottom: 10px;
      }
      li a {
        color: purple;
        margin: 0 20px;
      }
      button {
        float: right;
        margin-right: 15px;
        padding: 2px 17px;
        border: 1px solid black;
      }
      li .allOpt {
        float: left;
      }
      .hit {
        position: absolute;
        width: 300px;
        border: 5px solid gray;
        overflow: hidden;
        display: none;
        background-color: #fff;
      }
      .hit .delHit {
        color: white;
        font-family: "楷体";
        padding: 5px;
        background-color: rgb(209, 173, 14);
      }
      .hit .times {
        color: white;
        font-size: 18px;
        position: relative;
        top: -28px;
        left: 280px;
        cursor: pointer;
      }
      .hit p {
        text-align: center;
        margin-top: 10px;
        margin-bottom: 30px;
      }
      .hit .bt {
        background-color: #eee;
        overflow: hidden;
      }
      .hit .bt button {
        background-color: rgb(230, 227, 227);
        font-weight: bold;
        margin: 5px;
        float: right;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <input type="checkbox" name="del" /><a href="#">不开心</a
        ><button class="btnDel">删除</button>
      </li>
      <li>
        <input type="checkbox" name="del" /><a href="#">失落</a
        ><button class="btnDel">删除</button>
      </li>
      <li>
        <input type="checkbox" name="del" /><a href="#">沮丧</a
        ><button class="btnDel">删除</button>
      </li>
      <li>
        <button class="allDel">删除</button>
        <button class="allOpt">全选</button>
      </li>
    </ul>
    <div class="hit">
      <div class="delHit">删除时提示</div>
      <span class="times">&times;</span>
      <p>您真的要删除吗?</p>
      <div class="bt">
        <button class="yes">确定</button>
        <button class="no">取消</button>
      </div>
    </div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
  <script>
    //获取窗口大小并设置其位置
    var hitSet = function () {
      var windowWidth = $(window).width();
      var windowHeight = $(window).height();
      var hitWidth = $(".hit").width();
      var hitHeight = $(".hit").height();
      //设置弹出窗口的位置并显现
      var hitTop = Math.round((windowHeight - hitHeight) / 2);
      var hitLeft = Math.round((windowWidth - hitWidth) / 2);
      $(".hit")
        .css({
          "margin-top": hitTop,
          "margin-left": hitLeft,
        })
        .show();
    };

    //单击删除按钮  改变背景色并弹出窗口
    $(".btnDel,.allDel").click(function () {
      $("body").css("background-color", "black");
      $("ul").css("display", "none");
      hitSet();
    });

    //窗口改变时同时改变窗口位置
    $(window).resize(function () {
      hitSet();
    });

    //单击 x或取消 页面恢复
    $(".times,.no").click(function () {
      $("body").css("background-color", "");
      $("ul").show();
      $(".hit").hide();
    });

    //选中复选框 单击确定，删除记录，关闭提示框，页面恢复
    $(".yes").click(function () {
      $("body").css("background-color", "");
      $("ul").show();
      $(".hit").hide();
      var del = $("input[name=del]");
      del.each(function (index) {
        if (this.checked) {
          $(this).parent().empty(); //找到被选中父级然后清空
        }
      });
    });

    //点击全选按钮  选中全部复选框
    $(".allOpt").click(function () {
      var del = $("input[name=del]");
      del.each(function (index) {
        del.attr("checked", true);
      });
    });

    //点击复选框取消选中并清空checked属性，便于下次全选操作
    $("input[name=del]").click(function () {
      $(this).attr("checked", false);
    });
  </script>
</html>
